<template>
	<view class="searchContainer">
		
		
		<view class="headerSearchFixed">
			<view class="headerSearchFixedBac">
				<image class="headerSearchImage" src="../../../static/images/pageShow/sousuo.png"></image>
				<input class="headerSearchInput" placeholder-style='font-weight:400upx;font-size:26upx' placeholder="请输入搜索关键字" @focus="showGoodsList">
			</view>
			<view class="headerSearchButton" @click="goLastPage">取消</view>
		</view>
		<view class="searchMain">
			<view class="searchTitle">热门搜索</view>
			<view>
				<view class="searchItem" @click="showGoodsList" :class="{active:index === 0,active:index === 5,}" v-for="(hot,index) in searchList.hot" :key="index">{{hot}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		name:"Search",
		data(){
			return{
				searchList:[]
			}
		},
		methods:{
			// 获取搜索数据
			async getSearchList(){
				let res = await new Promise((rejected,resolve)=>{
					uni.request({
						url:"https://shopapi.smartisan.com/v1/search/hot-words",
						method:"GET",
						success(res) {
							rejected(res)
						},
						fail(err) {
							resolve(err)
						}
					})
					
				})
				this.searchList = res.data
			},
			// goLastPage取消搜索
			goLastPage(){
				// let pages = getCurrentPages(); //当前页面栈
				// console.log('/' + pages[0].route)
				uni.reLaunch({
					url:"/pages/index/index"
				});
			},
			// 显示商品详情
			showGoodsList(){
				uni.showToast({
					title: '闲了搞',
					duration: 2000
				});
			}
		},
		mounted() {
			this.getSearchList()
		}
	}
</script>

<style lang="stylus">
	.searchContainer
		height: 100%
		.headerSearchFixed
			height: 90upx
			width: 100%
			display: flex
			align-items: center
			border: 2upx solid rgba(0,0,0,.08);
			box-sizing: border-box
			background-color: #f5f5f5;
			.headerSearchFixedBac
				width: 75%
				display: flex
				align-items: center
				margin: 0 auto
				height: 60upx
				border-radius: 50upx
				font-size: 28upx
				border:1upx solid #e4e4e4
				background-color: transparent
				background: #fff
				box-sizing: border-box
				.headerSearchImage
					width: 28upx
					height: 28upx
					margin: 0 16upx
			.headerSearchButton
				font-weight: 700;
				font-size: 26upx;
				color: #626262;
				width: 120upx
				height: 60upx
				line-height: 60upx
				text-align: center
				margin: 0 10upx
				background-color: #f5f5f5
				border: 2upx solid #e0e0e0
				border-radius: 10upx
		.searchMain
			margin: 50upx 40upx
			.searchTitle
					font-size: 28upx
					color: #8e8e8e;
					font-weight: 400;
			.searchItem
				position: relative;
				font-size: 26upx;
				font-weight: 700;
				height: 56upx;
				line-height: 60upx;
				display: inline-block;
				padding: 0 24upx 0;
				opacity: 1;
				text-align: center;
				border-radius: 50upx;	
				color: #e78612;
				border: 1px solid #ffca6d
				background-color: #fff7e4;
				margin: 10upx 0 
				margin-right: 10upx
				&.active
					border: 1px solid #f1948c;
					color: #cd3f36;
					background-color: #ffe7e5;
</style>